<style>

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #eee;
}

.typing.animate {
  width: 21ch;
  border-right: 0.1em solid black;
  font-family: monospace;
  font-size: 2em;
  animation: type 2.5s steps(20), writer 1s infinite alternate,
    delete 0.5s steps(5) 2.5s, type2 1s steps(4) 3s forwards,
    type3 3s steps(22, end) 6s forwards;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.typing.animate::before {
  content: "欢迎来到星光博客后台管理系统";
  animation: type2 1s steps(4) 3s forwards, type3 3s steps(22, end) 6s forwards;
}

@keyframes type {
  from {
    width: 0;
  }
  to {
    width: 21ch;
  }
}

@keyframes type2 {
  from {
    width: 16ch;
    content: "欢迎来到星光博客后台管理系统";
  }
  to {
    width: 20ch;
    content: "欢迎来到星光博客后台管理系统";
  }
}

@keyframes type3 {
  from {
    width: 20ch;
    content: "欢迎来到星光博客后台管理系统。Welcome!";
  }
  to {
    width: 42ch;
    content: "欢迎来到星光博客后台管理系统。Welcome!";
  }
}

@keyframes writer {
  50% {
    border-color: transparent;
  }
}

@keyframes delete {
  from {
    width: 21ch;
  }
  to {
    width: 16ch;
  }
}
</style>
<template>
  <div class="box">
    <div class="typing animate"></div>
  </div>
</template>
<script>
$(document).ready(() => {
  let typingElement = $(".typing");

  typingElement.on("click", (e) => {
    typingElement.removeClass("animate");
    setTimeout(() => typingElement.addClass("animate"), 1);
  });
});
</script>
